<style lang="less" scoped="scoped">
    @import "image-manage.less";
</style>
<template>
    <Card style="padding:10px;">
        <Row>
            <Col span="5">
                    <card style="min-height: 500px; " title="影像件类型结构">
                            <Tree
                                :data="treeData"
                                ref="tree"
                                @on-select-change="selectTree"
                            ></Tree>
                    </card>
            </Col>
            <div class="search">
            <Col span="19">
                <Card style="min-height: 500px;margin-right: 10px;">
                    <Row>
                        <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
                        </Form>
                    </Row>
                    <Row>
                         <Table
                             :loading="loading"
                             :columns="columns"
                         >

                         </Table>
                    </Row>
                 </Card>
            </Col>
            </div>
        </Row>
    </Card>
</template>

<script>
    import Vue from 'vue';
    import {
        getAttCategoriesList,
        getSubCategoriesList
    }from "_p/basic/api/image/image-manage";
   import getTreeData from "../defines/getTreeData";
    Vue.prototype.getTreeData=getTreeData;
    export default {
        name: "image-manage",
        data(){
            return{
                loading: true,
                expandLevel: 0,
                queryId: "",
                treeData:[],
                data:[],
                searchForm:{
                    id:0,
                    pageNumber: 1,
                    pageSize: 10
                },
                total: 0,
                columns: [],
            }
        },
        methods: {
            init() {
                this.getTree();
            },
            changePage(v) {
                this.searchForm.pageNumber = v;
               /* this.getUserList();
                this.clearSelectAll();*/
            },
            changePageSize(v) {
                this.searchForm.pageSize = v;
               /* this.getUserList();*/
            },
            selectTree(){
                let selectedNode=this.$refs.tree.getSelectedNodes()[0];
                if(selectedNode){
                    this.searchForm.id=selectedNode.id;
                    this.getTableData();
                }
            },
            getTree(){
                getAttCategoriesList().then(res=>{
                    this.loading=false;
                    if (res.code === "0000") {
                        this.treeData = this.getTreeData(res.data);
                    }
                });
            },
            getTableData(){
                this.loading = true;
                getSubCategoriesList(JSON.stringify(this.searchForm)).then(res=>{
                    this.loading = false;
                    if (res.code === "0000") {
                        this.data = res.data.records;
                        this.total = res.data.total;
                    }
                });
            }

        },
        mounted(){
            this.init();
        }
    };
</script>
